<template>
  <div>
  <div>App</div>
  <button @click="comp='News'">新闻</button>
  <button @click="comp='Music'">音乐</button>

    <!-- 
      动态组件:我们可以通过components组件的is属性来决定渲染哪一个组件
        * component内置组件:渲染一个“元组件”为动态组件,依 is 的值，来决定哪个组件被渲染
        * is属性必须动态绑定,并且值是被动态加载的组件的名称
     -->
     <component :is="comp"></component>
    </div>
</template>

<script>
import Music from './components/Music'
import News from './components/News'
export default {
name:"App",
components:{
  Music,
  News
},
data(){
  return{
    comp:""
  }

  
}
}
</script>

<style>

</style>